<template>

    <span v-if="needColor" :style="{color:fontColor}">{{ tweeningValue }}</span>
    <span v-else-if="!needColor">{{ tweeningValue }}</span>


</template>
<script>
  import TWEEN from '@tweenjs/tween.js';

  export default {
    data() {
      return {
        tweeningValue: 0,
        fontColor:'#029363'
      };
    },
    props: {
      value: {
        type: Number,
        required: true,
      },
      fix:{
        type: Number,
        default:0,
      },
      needColor:{
        type:Boolean,
        default:false
      }
    },
    watch: {
      value: function (newValue, oldValue) {
        this.tween(oldValue, newValue);
      },
    },
    mounted() {
      this.tweeningValue = this.value.toFixed(this.fix);
      if(this.tweeningValue>=80){
        this.fontColor='#029363';
      }else if(this.tweeningValue>=60&&this.tweeningValue<80){
        this.fontColor='#ff9510';
      }else{
        this.fontColor='#fe3c59';
      }
    },
    methods: {
      tween: function (startValue, endValue) {
        new TWEEN.Tween({tweeningValue: startValue}).to({tweeningValue: endValue}).onUpdate(object => {
          this.tweeningValue = object.tweeningValue.toFixed(this.fix);

          if(this.tweeningValue>=80){
            this.fontColor='#029363';
          }else if(this.tweeningValue>=60&&this.tweeningValue<80){
            this.fontColor='#ff9510';
          }else{
            this.fontColor='#fe3c59';
          }

        }).start();
      },
    },
  };
</script>
<style lang="less" scoped>

</style>
